import React from 'react';
import { Button, Toast } from 'antd-mobile';

import { timer, Http } from '@/utils';

type Props = {
  id: string | number;
  type: number;
  img: string;
  name: string;
  price: string;
  createTime: string | number;
};

const Item: React.FC<Props> = (props) => {
  const handlePay = async () => {
    const result = await Http({
      url: '/orders/pay',
      body: {
        id: props.id,
      },
    });
    if (result) {
      Toast.success('支付成功');
      window.location.reload();
    }
  };

  const renderPay = () => {
    switch (props.type) {
      case 0:
        return (
          <Button type="warning" size="small" onClick={handlePay}>
            去支付
          </Button>
        );
      case 1:
        return <Button size="small">已完成</Button>;
      default:
        break;
    }
  };

  return (
    <div className="order-item">
      <div className="order-item">
        <img alt="order" src={props?.img} />
        <div className="center">
          <div className="title">{props?.name}</div>
          <div className="price">￥{props?.price}</div>
          <div className="time">{timer(props?.createTime, 'day')}</div>
        </div>
        <div className="pay">{renderPay()}</div>
      </div>
    </div>
  );
};

export default Item;
